<!-- 重置密码 - resetPassword--  -->
<template>
  <view class="">
    <!-- 标题栏 -->
    <view class="head-box ss-m-b-25">
      <view class="head-title ss-m-b-20">设置支付密码</view>
    </view>

    <!-- 表单项 -->
    <uni-forms
      ref="resetPasswordRef"
      v-model="state.model"
      :rules="state.rules"
      validateTrigger="bind"
      labelWidth="140"
      labelAlign="center"
    >
	<view class="formBox">
		
		  <uni-forms-item name="mobile" label="手机号">
			  <view class="contentBorder">
				<uni-easyinput
				  placeholder="请输入手机号"
				  v-model="state.model.mobile"
				  type="number"
				  :inputBorder="false"
				  disabled="true"
				>
				  <template v-slot:right>
					<button
					  class="ss-reset-button code-btn code-btn-start"
					  :disabled="state.isMobileEnd"
					  :class="{ 'code-btn-end': state.isMobileEnd }"
					  @tap="getSmsCode('resetPayPassword', state.model.mobile)"
					>
					  {{ getSmsTimer('resetPayPassword') }}
					</button>
				  </template>
				</uni-easyinput>
			  </view>
		  </uni-forms-item>

		  <uni-forms-item name="code" label="验证码">
			  <view class="contentBorder">
				<uni-easyinput
				  placeholder="请输入验证码"
				  v-model="state.model.code"
				  type="number"
				  maxlength="4"
				  :inputBorder="false"
				></uni-easyinput>
			  </view>
		  </uni-forms-item>

		  <uni-forms-item name="pay_password" label="密码">
			  <view class="contentBorder">
				<uni-easyinput
				  type="number"
				  maxlength="6"
				  placeholder="请输入密码"
				  v-model="state.model.pay_password"
				  :inputBorder="false"
				   
				>
				  <template v-slot:right>
					<button class="ss-reset-button login-btn-start" @tap="resetPasswordSubmit">
					  确认
					</button>
				  </template>
				</uni-easyinput>
			  </view>
		  </uni-forms-item>
	</view>
    </uni-forms>
	<view class="tipsBox ss-p-l-4">
		<view class="tipsBox-item">
			为了您的账号安全，设置密码前请先进行安全验证
		</view> 
	</view>
    <button v-if="!isLogin" class="ss-reset-button type-btn" @tap="showAuthModal('accountLogin')">
      返回登录
    </button>
  </view>
</template>

<script setup>
  import { computed, watch, ref, reactive, unref,onMounted } from 'vue';
  
  import sheep from '@/sheep';
  
  import { code, mobile,pay_password } from '@/sheep/validate/form';
  
  import { showAuthModal, closeAuthModal, getSmsCode, getSmsTimer } from '@/sheep/hooks/useModal';

  const resetPasswordRef = ref(null);
  
  const isLogin = computed(() => sheep.$store('user').isLogin);

  // 数据
  const state = reactive({
    isMobileEnd: false, // 手机号输入完毕
    model: {
      mobile: '', //手机号
      code: '', //验证码
      pay_password: '', //密码
    },
    rules: {
      code,
      mobile,
      pay_password,
    },
  });

  // 4.重置密码
  const resetPasswordSubmit = async () => {
    const validate = await unref(resetPasswordRef)
      .validate()
      .catch((error) => {
        console.log('error: ', error);
      });
    if (!validate) return;

    sheep.$api.user.resetPayPassword(state.model).then((res) => {
      if (res.error === 0) {
        sheep.$store('user').getInfo();
        closeAuthModal();
      }
    });
  };
  onMounted(()=>{
	  console.log('userinfo:',sheep.$store('user').userInfo.mobile)
	  state.model.mobile = sheep.$store('user').userInfo.mobile;
  })
</script>

<style lang="scss" scoped>
  @import '../index.scss';
  .contentBorder{
	  
  	  border-bottom: 2rpx solid #D8D8D8;
  }
  .code-btn-start {
  	  border:none;
    font-family: Source Han Sans;
    font-size: 26rpx;
    font-weight: normal;
    line-height: normal;
    text-align: center;
    letter-spacing: normal;
    color: #FF6052;
  }
  .type-btn{
  	  width: 100%;
  	  margin-top: 80rpx;
  	  font-family: Source Han Sans;
  	  font-size: 26rpx;
  	  font-weight: 500;
  	  line-height: normal;
  	  text-align: center;
  	  letter-spacing: normal;
  	  color: #302F2F;
  }
  .login-btn-start{
  	  border-radius: 100rpx;
  	  background: #2B6EDE;
  	  width: 101rpx;
  	  height: 40rpx;
  	  font-family: Source Han Sans;
  	  font-size: 26rpx;
  	  font-weight: normal;
  	  line-height: 40rpx;
  	  text-align: center;
  	  letter-spacing: normal;
  	  color: #FFFFFF;
  	  margin-right: 10rpx;
  }
  .head-box{
  	  .head-title{
  		  font-family: Source Han Sans;
  		  font-size: 36rpx !important;
  		  font-weight: 500 !important;
  		  line-height: normal;
  		  text-align: center;
  		  color: #404040;
  	  }
  }
  .formBox{
  	  border-radius: 20rpx;
  	  background: #EEEEEE;
  	  padding-top: 20rpx;
  	  padding-right: 20rpx;
  }
  .tipsBox{
  		margin-top: 50rpx;
  	  .tipsBox-item{
  		  font-family: Source Han Sans;
  		  font-size: 28rpx;
  		  font-weight: normal;
  		  line-height: normal;
  		  letter-spacing: normal;
  		  color: #9E9E9E;
  	  }
  }
</style>
